<template>
  <view class="bg-white min-h-100vh p-4">
    <u-form label-position="left" ref="uForm" :model="formData" :rules="rules">
      <u-form-item
        label="警员"
        prop="officerId"
        border-bottom
        label-width="80"
        required
        @click="showOfficers = true"
      >
        <picker
          :show="showOfficers"
          :range="officers"
          range-key="label"
          header-text="请选择值班警员"
          @change="handleSelectOfficer"
        >
          <u-input
            v-model="formData.officerName"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择值班警员"
            border="none"
          ></u-input>
        </picker>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="值班日期"
        prop="date"
        border-bottom
        label-width="80"
        required
        @click="calendarShow = true"
      >
        <!-- <picker
          mode="date"
          header-text="请选择值班日期"
          @change="handleSelectDate"
        > -->
        <u-input
          v-model="formData.date"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择值班日期"
          border="none"
        ></u-input>
        <!-- </picker> -->
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </u-form>

    <view class="w-full flex mb-20rpx mt-10px">
      <u-button
        text="查看值班情况"
        color="#F7BB3C"
        :customStyle="{
          width: '45%',
          marginRight: '10px'
        }"
        @click="calendarShow = true"
      />
      <u-button
        text="提交"
        color="#386ee8"
        class="mt-10px"
        :throttle-time="600"
        :loading="btnLoading"
        @click="handleSubmit"
      />
    </view>
    <!-- <view v-if="dutyList.length"> -->
    <u-calendar
      ref="calendar"
      :show="calendarShow"
      closeOnClickOverlay
      @confirm="handleSelectDate"
      @close="
        () => {
          calendarShow = false
        }
      "
    ></u-calendar>
    <!-- </view> -->
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import { getOfficersRecordsApi } from '../form/service'
import { showToast } from '@/utils'
import { getOnGuardRecordsApi, postOnGuarddApi } from './service'

@Component({ name: 'OnGuard' })
export default class OnGuard extends Vue {
  calendarShow = false
  btnLoading = false
  showOfficers = false
  dutyList: Record<string, any> = []
  officers: {
    label: string
    id: string
  }[] = []
  formData = {
    officerName: '',
    officerId: '',
    date: ''
  }
  rules = {
    officerId: {
      type: 'string',
      required: true,
      message: '请选择值班警员',
      trigger: ['blur', 'change']
    },
    date: {
      type: 'string',
      required: true,
      message: '请选择值班日期',
      trigger: ['change']
    }
  }
  formatter(day: any) {
    this.dutyList.forEach((i: any) => {
      if (
        dayjs(day.date).format('YYYY-MM-DD') ===
        dayjs(i.DutyDate).format('YYYY-MM-DD')
      ) {
        day.bottomInfo = i.OfficerName
        day.disabled = true
        day.dot = true
      }
    })
    return day
  }

  handleSelectOfficer({ detail: { value } }: any) {
    this.formData.officerId = String(this.officers[value].id)
    this.formData.officerName = String(this.officers[value].label)
    this.showOfficers = false
  }

  handleSelectDate([date]: any) {
    this.calendarShow = false
    this.formData.date = date
  }

  async handleSubmit() {
    try {
      await (this.$refs.uForm as any).validate()
      uni.showLoading({
        title: '提交中'
      })
      const { date, officerId, officerName } = this.formData
      this.dutyList.push({
        DutyDate: date,
        OfficerID: officerId,
        OfficerName: officerName
      })
      await postOnGuarddApi(this.dutyList[this.dutyList.length - 1])
      this.formData = { date: '', officerId: '', officerName: '' }
      showToast({ title: '提交成功' })
      ;(this.$refs.calendar as any).setFormatter(this.formatter)
    } finally {
      uni.hideLoading()
    }
  }
  async onLoad() {
    const { records } = await getOfficersRecordsApi()
    this.officers = records.map((item: any) => {
      return {
        label: item.Name,
        id: item.OfficerID
      }
    })
  }
  async onReady() {
    const res = await getOnGuardRecordsApi()
    this.dutyList = res.records
    ;(this.$refs.calendar as any).setFormatter(this.formatter)
  }
}
</script>

<style lang="scss" scoped></style>
